<template>
  <div>
    <div v-if="isShow && isAdd">
      <div>
        <button @click="add">添加+</button>
      </div>
      <el-table :data="AllUserInfo" style="width: 100%">
        <el-table-column prop="id" label="id" width="180" />
        <el-table-column prop="username" label="用户名" width="180" />
        <el-table-column prop="password" label="密码" />
        <el-table-column prop="nickname" label="别名" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="phone" label="电话" />
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="deleteThis(scope.row)"
              >删除</el-button>
            <el-button link type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-else-if="!isShow">
      <div>
        <button @click="isShow = true">取消</button>
      </div>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="Username">
          <el-input v-model="username" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="name">
          <el-input v-model="name" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="Password">
          <el-input v-model="pass" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="Email">
          <el-input v-model="email" />
        </el-form-item>
        <el-form-item label="Phone">
          <el-input v-model.number="phone" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">Submit</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-else-if="!isAdd">
      <div>
        <button @click="isAdd = true">取消</button>
      </div>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="Username">
          <el-input v-model="username" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="name">
          <el-input v-model="name" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="Password">
          <el-input v-model="pass" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="Email">
          <el-input v-model="email" />
        </el-form-item>
        <el-form-item label="Phone">
          <el-input v-model.number="phone" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="AddUser()">Submit</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// import qs from 'qs'

export default {
  name: 'ManageUser',
  data () {
    return {
      AllUserInfo: [],
      isShow: true,
      isAdd: true,
      pass: '',
      name: '',
      phone: 0,
      username: '',
      email: '',
      id: 0
    }
  },
  methods: {
    async deleteThis (row) {
      // console.log(index, row)
      // console.log(row.id)
      await this.$http({
        url: '/manage/deleteuser',
        method: 'GET',
        params: {
          id: row.id
        }
      })
      this.getAllUserInfo()
    },
    edit (row) {
      this.id = row.id
      this.isShow = false
    },
    add () {
      this.isAdd = false
    },
    async AddUser () {
      const username = this.username
      const id = this.id
      const password = this.pass
      const nickname = this.name
      const email = this.email
      const phone = this.phone
      // console.log(id, password, nickname, username)
      await this.$http({
        url: '/manage/adduser',
        method: 'POST',
        params: { id: id, username: username, password: password, nickname: nickname, email: email, phone: phone }
      })
      // console.log(res)
      this.isAdd = true
      this.getAllUserInfo()
    },
    async submitForm () {
      const username = this.username
      const id = this.id
      const password = this.pass
      const nickname = this.name
      const email = this.email
      const phone = this.phone
      // console.log(id, password, nickname, username)
      await this.$http({
        url: '/manage/edituserinfo',
        method: 'POST',
        params: { id: id, username: username, password: password, nickname: nickname, email: email, phone: phone }
      })
      // console.log(res)
      this.isShow = true
      this.getAllUserInfo()
    },
    async getAllUserInfo () {
      const { data: res } = await this.$http({
        url: '/manage/getuserinfo',
        method: 'GET'
      })
      this.AllUserInfo = res.data
      // console.log(this.AllUserInfo)
    }
  },
  created () {
    this.getAllUserInfo()
  }
}
</script>

<style lang="less" scoped>

</style>
